<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td,
        th {
            border-style: solid;
            border-width: 1px;
        }
    </style>
</head>

<body>
    <!-- 1、js可以操作dom节点
    2、js可以请求网络数据 -->
    <div>
        <input type="text" placeholder="请输入需要查找的id.商品名称.价格.库存.供应商" name="keyword">
        <input type="button" value="查找" onclick="query()">
        <input type="button" value="添加" onclick="add()">
    </div>
    <table id="tbData">

        <tr>
            <th>Id</th>
            <th>标题</th>
            <th>摘要</th>
            <th>内容</th>
            <th>分类</th>
            <th>作者</th>
            <th>发表时间</th>
            <th>操作</th>
        </tr>

    </table>


    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./config/baseUrl.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/init.js"></script>
   
    <script>
        function add() {
            console.log('你点了一下添加按钮');
            location.href = './addorEdit.html'
        }

        function update(id) {
            location.href = './addOrEdit.html?id=' + id;
        }

        function del(id) {
            console.log("你点击了一次删除" + id);
            //调用函数要区分大小写
            delbokeByid(id).then(data => {
                console.log('要执行了');
                if (data.code === 1000) {
                    console.log(data);
                    let id = data.data.id;
                    
                    //先给<tr>加一个属性key让每一个商品都有id
                    //删除时直接去掉key属性选中的id,避免了手动刷新网页
                     $(`[key=${id}]`).remove();

                } else {
                    alert(data.msg);//弹窗显示msg的值
                    
                }
            
            })
        }

        function query() {
            let keyword = $('[name=keyword]').val();
            console.log('key的值'+keyword);
            getListWithKeyword(keyword);
        }
    </script>
</body>

</html>